<template>
    向下滑动，查看元素是否在视口中
    <div v-inView="handleInView" style="margin-top: 1000px; height: 150px; background: lightgreen">
        元素是否在视口中？{{ visible ? '✅ 是' : '❌ 否' }}
    </div>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)

function handleInView(isVisible) {
    console.log('元素是否在视口中？', isVisible ? '是' : '否')
    visible.value = isVisible
}
</script>